<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

	<script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
	<script src="./dist_dagre-d3.min.js"></script>

<!-- Pull in JQuery dependencies -->
<link rel="stylesheet" href="tipsy.css">
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="tipsy.js"></script>	

<style id="css">
body {
  font: 300 14px 'Helvetica Neue', Helvetica;
}

.node rect,
.node circle,
.node ellipse {
  stroke: #333;
  fill: #fff;
  stroke-width: 1px;
}

.edgePath path {
  stroke: #333;
  fill: #333;
  stroke-width: 1.5px;
}

.node rect {
  background: lightblue;
  font-size: 16px;
  color: white;
  width: 50px;
  height: 50px;
}


.screenfull-svg {
    cursor: pointer;
    /*fill: red; */    
   }

/* This styles the title of the tooltip */
.tipsy .name {
  font-size: 1.5em;
  font-weight: bold;
  color: #60b1fc;
  margin: 0;
}

/* This styles the body of the tooltip */
.tipsy .description {
  font-size: 1.2em;
}

.edgePath path.path {
  stroke: #333;
  fill: none;
  stroke-width: 1.5px;
}
</style>
</head>
<body>
	 

<!-- <h1>Dagre D3 Demo: Arrows</h1>  -->

<svg width="1260" height="600" class="screenfull-svg"><g/></svg>

<!-- 
<section>
<p>A sample that shows the different arrows available in dagre-d3.
</section>
 -->
<script id="js">
// =========================================== 文档 ------======
// ============   node shape可选值
//        rect, circle,ellipse,diamond
// ============   Edge的arrowhead可选值
//        "normal", "vee", "undirected"


// Create a new directed graph
var g = new dagreD3.graphlib.Graph().setGraph({});

g.setGraph({
    nodesep: 70,
    ranksep: 50,
    rankdir: "LR", // 流程方向
    marginx: 20,
    marginy: 20
  });

  
// 设置节点
g.setNode('p3', { label: 'p3',shape: "ellipse"});
g.setNode('p2', { label: 'p2',shape: "ellipse"});
g.setNode('p2-1', { label: 'p2-1',shape: "ellipse"});
g.setNode('p2-1-1', { label: 'p2-1-1',shape: "ellipse"});
g.setNode('p', { label: 'p',shape: "ellipse"});
g.setNode('c', { label: 'c',shape: "ellipse"});
g.setNode('b', { label: 'b',shape: "ellipse"});

var html = `<div style="color: white;background-color: red;">html</div>`
g.setNode('p1', { 
  labelType: 'html',
  label: html,
  rx: 0, // 圆角
  ry: 0,
  // padding: 0,
});

g.setNode('c1', { label: 'c1'});

debugger
// 连接线 （start, end, lineStyle）
g.setEdge('b', 'c', {
  arrowhead: 'vee',
  label: '1'
});
g.setEdge('c', 'b', {
  arrowhead: 'normal',
  label: '10',
  style: "stroke: #f66; stroke-width: 1px;",
  curve: d3.curveBasis  
});

g.setEdge('c', 'p', {
  arrowhead: 'normal',
  label: '3'
});

g.setEdge('c', 'p2', {
  arrowhead: 'normal',
  label: '4'
});
g.setEdge('p2', 'c', {
  arrowhead: 'normal',
  label: '9',
  style: "stroke: #f66; stroke-width: 1px;",
  curve: d3.curveBasis  
});

g.setEdge('c', 'p3', {
  arrowhead: 'normal',
  label: '2'
});

g.setEdge('p2', 'p2-1', {
  arrowhead: 'normal',
  label: '5',
  style: "stroke-width: 1px;", //stroke: #f66; 
  curve: d3.curveBasis    
});
g.setEdge('p2-1', 'p2', {
  arrowhead: 'normal',
  label: '8',
  style: "stroke: #f66; stroke-width: 1px;",
  curve: d3.curveBasis  
});

g.setEdge('p2-1', 'p2-1-1', {
  arrowhead: 'normal',
  label: '6'
});
g.setEdge('p2-1-1', 'p2-1', {
  arrowhead: 'normal',
  label: '7',
   //style: "fill:#f77"  //point.success ? "fill:#7f7" : 
  style: "stroke: #f66; stroke-width: 1px;", // stroke-dasharray: 5, 5;
  // arrowheadStyle: "fill: #f66", // 箭头样式
  //labelStyle: "font-style: italic; text-decoration: underline;",
  curve: d3.curveBasis
});

var svg = d3.select('svg');
var inner = svg.select('g');



// 可以收缩放大
var zoom = d3.zoom().on("zoom", function() {
      inner.attr("transform", d3.event.transform);
    });
svg.call(zoom);

// 渲染到页面
var render = new dagreD3.render();
render(inner, g);

// Simple function to style the tooltip for the given node.
var styleTooltip = function(name, description) {
  return "<p class='name'>" + name + "</p><p class='description'>" + description + "</p>";
};
inner.selectAll("g.node")
  .attr("title", function(v) { return styleTooltip(v, g.node(v).description) })
  .each(function(v) { $(this).tipsy({ gravity: "w", opacity: 1, html: true }); });


var initialScale = 0.75;
svg.call(zoom.transform, d3.zoomIdentity.translate((svg.attr("width") - g.graph().width * initialScale) / 2, 20).scale(initialScale));
//svg.attr('height', g.graph().height * initialScale + 40);

</script>
</body>
</html>
